<template>
  <div class="sys_main">
    <div class="all_main">
      <div class="top_box">
        <!-- 图表+表格 -->
        <div class="echart_top_box">
          <div id="topechart"></div>
        </div>
        <div class="table_top_box">
          <div id="toptable">
            <p>{{ chart[1].title }}</p>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              height="170"
              :row-style="{ height: '0' }"
              :cell-style="{ padding: '3px' }"
            >
              <el-table-column prop="date" label="发现日期" align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="漏洞名称"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="漏洞等级" align="center">
              </el-table-column>
              <el-table-column prop="date" label="涉及系统" align="center">
              </el-table-column>
              <el-table-column prop="name" label="系统负责人" align="center">
              </el-table-column>
              <el-table-column prop="address" label="状态" align="center">
              </el-table-column>
              <el-table-column prop="date" label="延期时间" align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50]"
              :page-size="10"
              layout=" sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="bottom_box">
        <!-- 图表+表格 -->
        <div class="echart_bottom_box">
          <div id="bottomechart"></div>
        </div>
        <div class="table_bottom_box">
          <div id="bottomtable">
            <p>{{ chart[3].title }}</p>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              height="170"
              :row-style="{ height: '0' }"
              :cell-style="{ padding: '3px' }"
            >
              <el-table-column prop="date" label="发现日期" align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="漏洞名称"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="漏洞等级" align="center">
              </el-table-column>
              <el-table-column prop="date" label="涉及系统" align="center">
              </el-table-column>
              <el-table-column prop="name" label="系统负责人" align="center">
              </el-table-column>
              <el-table-column prop="address" label="状态" align="center">
              </el-table-column>
              <el-table-column prop="date" label="延期时间" align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50]"
              :page-size="10"
              layout=" sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: [
        { title: "生产漏洞修复进度", key: 0, lable: "echart" },
        { title: "监管通报漏洞统计", key: 1, lable: "table" },
        { title: "sca漏洞修复进度", key: 2, lable: "echart" },
        { title: "渗透测试延期漏洞统计", key: 3, lable: "table" },
      ],
      currentPage4: 4,
      tableData: [
        {
          date: "2016-05-02",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-04",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-01",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-03",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-02",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-04",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-01",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-03",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-02",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-04",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-01",
          name: "name",
          address: "我是很长的内容",
        },
        {
          date: "2016-05-03",
          name: "name",
          address: "我是很长的内容",
        },
      ],
      topmyChart: null,
      bottomChart: null,
    };
  },
  components: {},
  created() {
    this.getTopEchartInfo(0);
    this.getTopTableInfo();
    this.getBottomEchartInfo(2);
    this.getBottomTableInfo();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //上图表id==topechart
    getTopEchartInfo(val) {
      this.$nextTick(() => {
        let chart = document.getElementById("topechart");
        if (
          this.topmyChart != null &&
          this.topmyChart != "" &&
          this.topmyChart != undefined
        )
          this.topmyChart.dispose(); //销毁

        this.topmyChart = echarts.init(chart);
        // 展示数据
        const data = [
          { name: "数据1", valueA: 10, valueB: 20, valueC: 30 },
          { name: "数据2", valueA: 15, valueB: 25, valueC: 35 },
          { name: "数据3", valueA: 20, valueB: 30, valueC: 40 },
        ];
        //这里的val用来确定目前显示什么内容
        let option = {
          // 设置图表的标题
          title: {
            text: `${this.chart[val].title}`,
            left: 10,
            textStyle: {
              color: "cornflowerblue",
              fontWidth: 700,
            },
          },
          // 设置图表的提示框组件
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          // 设置图表的图例组件
          legend: {
            data: ["A", "B", "C"],
            show: false,
          },
          // 设置图表的 x 轴配置
          xAxis: {
            type: "category",
            data: data.map((item) => item.name),
          },
          // 设置图表的 y 轴配置
          yAxis: {
            type: "value",
          },
          // 设置图表的系列（数据列）
          series: [
            {
              name: "A",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueA),
            },
            {
              name: "B",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueB),
            },
            {
              name: "C",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueC),
            },
          ],
        };
        this.topmyChart.setOption(option);
        window.addEventListener("resize", function () {
          this.topmyChart.resize();
        });
      });
    },
    // 上表格
    getTopTableInfo() {},
    // 下图表id==bottomechart
    getBottomEchartInfo(val) {
      this.$nextTick(() => {
        let chart = document.getElementById("bottomechart");
        if (
          this.bottomChart != null &&
          this.bottomChart != "" &&
          this.bottomChart != undefined
        )
          this.bottomChart.dispose(); //销毁

        this.bottomChart = echarts.init(chart);
        // 展示数据
        const data = [
          { name: "数据1", valueA: 10, valueB: 20, valueC: 30 },
          { name: "数据2", valueA: 15, valueB: 25, valueC: 35 },
          { name: "数据3", valueA: 20, valueB: 30, valueC: 40 },
        ];
        //这里的val用来确定目前显示什么内容
        let option = {
          // 设置图表的标题
          title: {
            text: `${this.chart[val].title}`,
            left: 10,
            textStyle: {
              color: "cornflowerblue",
              fontWidth: 700,
            },
          },
          // 设置图表的提示框组件
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          // 设置图表的图例组件
          legend: {
            data: ["A", "B", "C"],
            show: false,
          },
          // 设置图表的 x 轴配置
          xAxis: {
            type: "category",
            data: data.map((item) => item.name),
          },
          // 设置图表的 y 轴配置
          yAxis: {
            type: "value",
          },
          // 设置图表的系列（数据列）
          series: [
            {
              name: "A",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueA),
            },
            {
              name: "B",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueB),
            },
            {
              name: "C",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueC),
            },
          ],
        };
        this.bottomChart.setOption(option);
        window.addEventListener("resize", function () {
          this.bottomChart.resize();
        });
      });
    },
    // 下表格
    getBottomTableInfo() {},
  },
  watch: {},
  computed: {},
};
</script>

<style scoped>
.sys_main {
  background: pink;
  height: 70%;
  width: 100%;
}
.all_main {
  height: 48%;
  width: 100%;
  margin-bottom: 10px;
}
.top_box,
.bottom_box {
  height: 100%;
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.echart_top_box,
.echart_bottom_box {
  margin-right: 10px;
  height: 100%;
  width: 39%;
  background: #fff;
}
.table_top_box,
.table_bottom_box {
  height: 100%;
  width: 60%;
  background: #fff;
}
#bottomechart,
#topechart {
  margin-top: 15px;
  height: 90% !important;
  width: 100% !important;
}
.el-pagination {
  background: #fff;
  text-align: end;
  padding: 5px;
}
#toptable > p,
#bottomtable > p {
  margin: 10px;
  font-size: 18px;
  font-weight: 700;
  color: cornflowerblue;
}
</style>